<template>
  <div class="container">
    <div>
      <img src="http://www.qfedu.com/imgs2022/right-fixed-face.png" alt="" />
      <!-- 登录 -->
      <loginShowBtn />
    </div>
    <van-grid :column-num="2">
      <van-grid-item to="/order">
        <template #icon>
          <xw-icon href="icon-yingyuan" />
        </template>
        <template #text> <span style="font-size: 12px">电影订单</span> </template>
      </van-grid-item>
      <van-grid-item to="/order" icon="photo-o" text="商品订单" />
    </van-grid>
    <div class="list">
      <van-cell title="联系客服" icon="friends-o" to="/kefu" is-link></van-cell>
      <van-cell title="用户设置" icon="setting-o" to="/setting" is-link></van-cell>
      <van-cell @click="logout">
        <div v-if="nickname" style="text-align: center">用户退出</div>
      </van-cell>
    </div>
  </div>
</template>

<script>
import loginShowBtn from './ui/loginShowBtn.vue'
import { delStoreUser } from '@/utils/store'
export default {
  components: {
    loginShowBtn
  },
  computed: {
    nickname() {
      return this.$store.getters.nickname
    }
  },
  methods: {
    logout() {
      this.$dialog
        .confirm({
          title: '退出确认',
          message: '您真的要退出本次登录吗？',
          confirmButtonText: '残忍退出',
          cancelButtonText: '再想一下',
          confirmButtonColor: '#ff5f16'
        })
        .then(() => {
          this.$store.commit('user/setUser', { uid: 0, nickname: '', token: '' })
          delStoreUser()
        })
        .catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  > div:nth-of-type(1) {
    text-align: center;
    height: 150px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 16px;
    img {
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  .list {
    margin-top: 10px;
    background: #fff;
  }
}
</style>
